<template>
  <div>
    <div class="content bg-fff  mb_50">
      <div class="con">
        <div class="price"><span class="zhi">3999</span>积分<span class="yuanjia"><del>19.00元</del></span></div>
        <div class="name">
          拉菲红酒750ml一瓶
        </div>
      </div>
      <div class="condition">
        <div class="c1">使用有效期：【兑换后7天内有效，请及时使用！】</div>
        <div class="c2">
          不可退, 一经兑换，一律不退优惠券和唯品币，如拒收或退货也不退回原优惠券；单笔订单仅支持一张优惠券，品牌红包、品类券、全场券、线上支付券不可叠加使用；
        </div>
      </div>
      <div class="clearfix num-div">
        <div>数量</div>
        <div>限兑换 1 件</div>
      </div>
      <div class="line-10"></div>
      <div id="myinfo" class="info">
        <div @click="showInfo">商品信息</div>
        <div @click="showBuy">购买须知</div>
      </div>
      <div class="goods-con">
        1、单笔订单限用一张唯品会优惠券（与品牌红包、品类券、全场券、在线支付券不可叠加使用），优惠券不兑现，不找零，不可抵扣运费；优惠金额按照适用商品价格比例分摊至每件商品；
  2、优惠券兑换后7天内有效；
  3、适用范围：自营商品&唯品国际；
  4、此优惠券新老用户都可使用；
  5、优惠券一经兑换，一律不退还优惠券，不退换唯品币，如拒收或退货：不退回原优惠券（也不退还唯品币）。请会员兑换前仔细参照商品详情、预订须知、有效期等重要信息。
  6、该优惠券每个会员每24小时内只能兑换一次；
      </div>
    </div>
    <div class="dh-btn">立即兑换</div>
  </div>

</template>

<script>
  export default {
    components: {},
    data(){
      return {
      };
    },
    mounted(){

    },
    methods: {
      showInfo(){
          var oUl = document.getElementById("myinfo");
          oUl.className = "info";
      },
      showBuy(){
        var oUl = document.getElementById("myinfo");
        oUl.className = "info2";
      }
    },
    filters: {}
  }
</script>

<style scoped>
  .line-10{
    background: #eee;
    height: .5rem;
  }
  .mb_50{
    margin-bottom: 2.5rem;
  }
  .content {
    text-align: left;
  }

  .con {
    background: #fff;
    padding: 1.15rem .75rem;
  }

  .price {
    font-size: .65rem;
    color: #333;

  }

  .price .zhi {
    font-size: 1.2rem;
    color: #E93B3D;
  }

  .price .yuanjia {
    color: #999;
    margin-left: .25rem;
  }

  .con .name {
    font-size: .65rem;
    color: #333;
    margin-top: .55rem;
  }

  .condition {
    padding: .75rem;
    background: #eee;
  }

  .c1 {
    font-size: .65rem;
    color: #333333;
    border-bottom: 1px dashed #d7d7d7;
    padding-bottom: .75rem;
  }

  .c2 {
    font-size: .65rem;
    color: #333333;
    padding-top: .75rem;
    line-height: 1rem;
  }

  .num-div {
    padding: .75rem;
  }

  .num-div div:first-child {
    float: left;
    font-size: .7rem;
    color: #333333;
  }

  .num-div div:last-child {
    float: right;
    font-size: .7rem;
    color: #E93B3D;
  }

  .info {
    text-align: center;
    overflow: hidden;
  }

  .info div:first-child {
    padding: .75rem;
    float: left;
    width: 50%;
    font-size: .7rem;
    color: #E93B3D;
    border-bottom: 2px solid #F46058;
  }

  .info div:last-child {
    padding: .75rem;
    float: left;
    width: 50%;
    font-size: .7rem;
    color: #777777;
  }

  .info2 {
    text-align: center;
    overflow: hidden;
  }

  .info2 div:first-child {
    padding: .75rem;
    float: left;
    width: 50%;
    font-size: .7rem;
    color: #777777;
  }

  .info2 div:last-child {
    padding: .75rem;
    float: left;
    width: 50%;
    font-size: .7rem;
    color: #E93B3D;
    border-bottom: 2px solid #F46058;
  }

  .goods-con {
    background: #fff;
    margin: .75rem;
    font-size: .65rem;
    color: #555555;
  }

  .dh-btn {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #E93B3D;
    padding: .75rem 0;
    font-size: .75rem;
    color: #fff;
    text-align: center;
  }

</style>
